<template>
	<view class="container">
		<!-- 账单统计 -->
		<view class="bill-summary">
			<view class="summary-item">
				<text class="summary-label">本月通话</text>
				<text class="summary-value">{{ monthlyStats.calls }} 次</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">通话时长</text>
				<text class="summary-value">{{ monthlyStats.duration }} 分钟</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">消费金额</text>
				<text class="summary-value">¥ {{ monthlyStats.amount }}</text>
			</view>
		</view>
		
		<!-- 账单列表 -->
		<view class="bill-list">
			<view class="list-header">
				<text class="header-title">近期账单</text>
			</view>
			
			<view class="bill-item" v-for="(bill, index) in billList" :key="index">
				<view class="bill-info">
					<text class="bill-number">{{ bill.otherNumber }}</text>
					<text class="bill-type" :class="{ 'outgoing': bill.type === '呼出', 'incoming': bill.type === '呼入' }">
						{{ bill.type }}
					</text>
				</view>
				<view class="bill-details">
					<text class="bill-time">{{ bill.time }}</text>
					<text class="bill-duration">{{ bill.duration }}分钟</text>
					<text class="bill-cost">¥ {{ bill.cost }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthlyStats: {
					calls: 0,
					duration: 0,
					amount: 0
				},
				billList: [],
				userPhone: ''
			}
		},
		onLoad() {
			// 页面加载时获取用户账单信息
			this.fetchUserBillInfo();
		},
		methods: {
			// 获取用户账单信息
			async fetchUserBillInfo() {
				try {
					// 从本地存储获取用户手机号
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.phone) {
						uni.showToast({
							title: '未找到用户信息',
							icon: 'none'
						});
						return;
					}
					
					this.userPhone = userInfo.phone;
					
					// 调用API获取账单信息
					const response = await this.getBillsByPhone(this.userPhone);
					
					if (response.code === 0) {
						// 处理账单数据
						this.processBillData(response.data);
					} else {
						uni.showToast({
							title: response.msg || '获取账单信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取账单信息异常:', error);
					uni.showToast({
						title: '网络请求异常',
						icon: 'none'
					});
				}
			},
			
			// 调用获取账单接口
			getBillsByPhone(phone) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:6009/order-client/api/bill/getByPhone?phone=' + phone,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			
			// 处理账单数据
			processBillData(bills) {
				// 初始化统计数据
				this.monthlyStats = {
					calls: bills.length,
					duration: 0,
					amount: 0
				};
				
				// 处理账单列表和统计信息
				this.billList = bills.map(bill => {
					// 确定是呼入还是呼出
					const isOutgoing = bill.callerPhone === this.userPhone;
					const otherNumber = isOutgoing ? bill.calleePhone : bill.callerPhone;
					
					// 累加统计信息
					const duration = bill.callDuration || 0;
					const cost = bill.totalFee || 0;
					
					this.monthlyStats.duration += duration;
					this.monthlyStats.amount += cost;
					
					// 返回格式化后的账单数据
					return {
						otherNumber: otherNumber,
						type: isOutgoing ? '呼出' : '呼入',
						time: bill.createTime || '',
						duration: duration,
						cost: cost
					};
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}
	
	.bill-summary {
		display: flex;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.summary-item {
		flex: 1;
		text-align: center;
	}
	
	.summary-item:not(:last-child) {
		border-right: 1rpx solid #f0f0f0;
	}
	
	.summary-label {
		display: block;
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
	
	.summary-value {
		display: block;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.bill-list {
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.list-header {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.bill-item {
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.bill-item:last-child {
		border-bottom: none;
	}
	
	.bill-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.bill-number {
		font-size: 30rpx;
		color: #333333;
	}
	
	.bill-type {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	
	.bill-type.outgoing {
		background-color: #e8f4ff;
		color: #007AFF;
	}
	
	.bill-type.incoming {
		background-color: #e8fff4;
		color: #4cd964;
	}
	
	.bill-details {
		display: flex;
		justify-content: space-between;
	}
	
	.bill-time, .bill-duration, .bill-cost {
		font-size: 24rpx;
		color: #999999;
	}
	
	.bill-cost {
		color: #ff3b30;
		font-weight: bold;
	}
</style>